<template>
  <div class="app-container">
    <div style="width: 100%;">
      <!-- v-model实现双向绑定,handleFilter事件响应 原生回车事件  -->
      <el-input v-model="search" placeholder="作品名称" style="width: 25em;"/>
      <el-select v-model="domain" placeholder="网站名称">
        <el-option
          v-for="item in domains"
          :key="item.id"
          :label="item.name"
          :value="item.name">
        </el-option>
      </el-select>
      <el-button style="margin-left: 10px" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button type="primary" icon="el-icon-refresh" @click="refetchData">
        重置
      </el-button>
    </div>
    <el-table
      style="margin-top: 1em"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" prop="id" label="电影id">
      </el-table-column>
      <el-table-column prop="title" label="电影名称">
        <template slot-scope="scope">
        <span v-show="!scope.row.show">{{scope.row.title}}</span>
        <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.title"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="to_star" label="演员" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="cate_id" label="分类source_id">
        <template slot-scope="scope">
          <span v-show="!scope.row.show">{{scope.row.cate_id}}</span>
          <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.cate_id"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="tag" label="标签">
        <template slot-scope="scope">
          <span v-show="!scope.row.show">{{scope.row.tag}}</span>
          <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.tag"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="director" label="导演">
        <template slot-scope="scope">
          <span v-show="!scope.row.show">{{scope.row.director}}</span>
          <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.director"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="language" label="语言">
        <template slot-scope="scope">
          <span v-show="!scope.row.show">{{scope.row.language}}</span>
          <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.language"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="show_date" label="上映时间">
      </el-table-column>
      <el-table-column prop="add_time" label="更新时间">
      </el-table-column>
      <el-table-column prop="region" label="地区">
        <template slot-scope="scope">
          <span v-show="!scope.row.show">{{scope.row.region}}</span>
          <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.region"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="img" label="电影封面" width="200px" height="250px">
          <template slot-scope="scope" >
            <img :src="scope.row.img" width="180px" height="240px"/>
          </template>desc
      </el-table-column>
      <el-table-column prop="desc" label="描述" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="introduce" label="剧情介绍" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="score" label="评分">
        <template slot-scope="scope">
          <span v-show="!scope.row.show">{{scope.row.score}}</span>
          <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.score"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="original" label="原地址">
      </el-table-column>
      <el-table-column prop="source_type" label="来源类型">
      </el-table-column>
      <el-table-column prop="source_id" label="来源id">
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间">
      </el-table-column>
      <el-table-column prop="update_time" label="更新时间">
      </el-table-column>
      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="scope">
          <el-button v-show="!scope.row.show" @click="editRow(scope.row)">编辑</el-button>
          <el-button v-show="scope.row.show" type="success" @click="rowSave(scope.row)">保存</el-button>
          <el-button type="primary" @click="movieDetail(scope.row)">电影详情</el-button>
          <el-button type="danger" @click="rowDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="currentPage"
        :page-size="pagelimit"
        layout="total, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
import {getMovieList,updateMovie,deleteMovie, searchMovieList, domainMovieList} from '@/api/movieList'
import {getList} from "@/api/domain";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        1:'正常',
        0:'禁用'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      pageList: null,      // 当前页数据
      total: 0,          // 总数据条数
      currentPage: 1,    // 当前页
      pagelimit: 5,      // 页面展示数据条数
      search: '',        // 搜索字段
      tmpList: [],
      domains:[],
      domain:''
    }
  },
  created() {
    this.fetchData()
    this.getDomains()
  },
  methods: {
    refetchData() {
      this.search = ''
      this.domain = ''
      this.currentPage = 1
      this.listLoading = true
      let params = {
        limit:this.pagelimit,
        page:this.currentPage-1
      }
      getMovieList(params).then(response => {
        let data =response.data
        this.list = data.list
        this.total = data.total
        this.listLoading = false
      })
    },
    fetchData() {
      this.listLoading = true
      let params = {
        limit:this.pagelimit,
        page:this.currentPage-1
      }
      getMovieList(params).then(response => {
        let data =response.data
        this.list = data.list
        this.total = data.total
        this.listLoading = false
      })
    },
    getDomains(){
      getList().then(response => {
        this.domains = response.data
      })
    },
    editRow(row){
      row.show = !row.show
    },
    rowSave(row){
      let params = {
        id:row.id,
        title:row.title,
        cate_id:row.cate_id,
        to_star:row.to_star,
        tag:row.tag,
        director:row.director,
        language:row.language,
        region:row.region,
        desc:row.desc,
        introduce:row.introduce,
        score:row.score,
      }
      updateMovie(params).then(response => {
        if(response.data == 1){
          this.$message({
            showClose: true,
            message: '修改成功',
            type: 'success'
          });
        }
      })
      row.show = !row.show
      if(this.search){
        this.handleFilter()
      }else {
        this.fetchData()
      }
    },
    // 改变页面条数
    handleSizeChange: function(size) {
      this.pagelimit = size
      this.fetchData()
    },

    // 改变当前页
    handleCurrentChange(val) {
      this.currentPage = val
      if(this.search){
        this.handleFilter()
      }else if(this.domain){
        this.domainFilter()
      }else{
        this.fetchData()
      }
    },
    // 模糊搜索
    handleFilter() {
      let params = {
        title:this.search,
        limit:this.pagelimit,
        page:this.currentPage-1
      }
      searchMovieList(params).then(response => {
        let data =response.data
        this.list = data.list
        this.total = data.total
        this.listLoading = false
      })
    },
    domainFilter() {
      let params = {
        domain:this.domain,
        limit:this.pagelimit,
        page:this.currentPage-1
      }
      domainMovieList(params).then(response => {
        let data =response.data
        this.list = data.list
        this.total = data.total
        this.listLoading = false
      })
    },
    rowDelete(row){
      let params = {
        id:row.id
      }
      this.$confirm('确认删除该条记录', '确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success',
          callback: action => {
            if (action === 'confirm') {
              deleteMovie(params).then(response => {
                if(response.data == 1){
                  this.$message({
                    showClose: true,
                    message: '删除成功',
                    type: 'success'
                  });
                }
              })
              this.fetchData()
            }
            else {
              return
            }
          }
        })
    },
    movieDetail(row){
      this.$router.push({ path: `movieDetailTable`,query: { id: row.source_id }})
    },
    watchdomain(){
      this.currentPage = 1
      let params = {
        domain:this.domain,
        limit:this.pagelimit,
        page:this.currentPage-1
      }
      domainMovieList(params).then(response => {
        let data =response.data
        this.list = data.list
        this.total = data.total
        this.listLoading = false
      })
    }
  },
  watch: {
    domain: 'watchdomain'
  }
}
</script>
